<script setup lang="ts">
import axios from 'axios'
import request from '@/utils/request'
import { computed, reactive, ref, type Ref } from 'vue'
import { useRouter } from 'vue-router'
const text = ref()
type shop = {
  restaurantid: number
  addressareaid: string
  restauranttypename: string
  restaurantname: string
  password: string
  image: string
  phone: string
  createtime: string
  updatetime: string
  introduction: string
  addressdetail: string
  surplus: string
  state: number
  qualification: string
  point: string
}
function search(val: string) {
  axios({
    method: 'POST',
    params: {
      restaurantname: val
    },
    url: '/restaurant/search',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('Usertoken')
    }
  }).then((res) => {
    const { data } = res
    shopmenu.value = data.data
    console.log(data.data)
  })
}
const shopmenu = ref([] as shop[])
axios({
  method: 'GET',
  url: '/manage/resgetall',
  headers: {
    'Content-Type': 'application/octet-stream',
    Authorization: window.localStorage.getItem('Usertoken')
  }
}).then((res) => {
  const { data } = res
  shopmenu.value = data.data
  console.log('获得所有商家信息', data)
})
//获取路由器对象
let $router = useRouter()
function nextdetail(
  val: number,
  val1: string,
  val2: string,
  val3: string,
  val4: string,
  val5: string,
  val6: string,
  val7: number,
  val8: string
) {
  if (val7 == 2) {
    ElMessage.error('商家正在休息中...')
  } else if (val7 == 0) {
    ElMessage.warning('商家正在整改中...')
  } else {
    $router.push({
      path: '/detail',
      query: {
        restaurantid: val,
        addressareaid: val1,
        phone: val2,
        createtime: val3,
        updatetime: val4,
        image: val5,
        restaurantname: val6,
        addressdetail: val8
      }
    })
  }
}
let searchKeyword: Ref<String> = ref('')
function change() {
  searchKeyword.value = ''
}
function change1() {
  searchKeyword.value = '烧烤'
}
function change2() {
  searchKeyword.value = '地方菜系'
}
function change3() {
  searchKeyword.value = '小吃快餐'
}
function change4() {
  searchKeyword.value = '火锅'
}
function change5() {
  searchKeyword.value = '自助餐'
}
function change6() {
  searchKeyword.value = '面馆'
}
function change7() {
  searchKeyword.value = '咖啡厅'
}
function change8() {
  searchKeyword.value = '面包甜点'
}

//按钮的点击回调
const goHome = () => {
  $router.push('/index')
}
const goshangjia = () => {
  $router.push('/shangjia')
}
const goruzhu = () => {
  $router.push('/ruzhu')
}
const goaboutus = () => {
  $router.push('/aboutus')
}
const gologin = () => {
  $router.push('/login')
}
const gofankui = () => {
  $router.push('/fankui')
}

// 修改前

const restaurantImage =
  'https://img0.baidu.com/it/u=3276461935,1034993284&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500' // 替换为实际的图片路径
const restaurantName = '示例餐厅'
const restaurantAddress = '上海市浦东新区世纪大道'

// 地址
const value = ref('')

const options = [
  {
    value: '北京市',
    label: '北京市'
  },
  {
    value: '重庆市',
    label: '重庆市'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]
function changeCity() {
  isSelectAddress.value = true
}
// 修改后
import { codeToText, regionData } from 'element-china-area-data'
// 假设我们要找的城市是“重庆市”
const targetCity = ref('重庆市')

const districts = regionData.find((province) => province.label === targetCity.value)?.children
const tempDistricts = districts[0].children
watch(targetCity, (newValue, oldValue) => {
  //   console.log(`目标城市已改变：从 ${oldValue} 变为${newValue}`);
  //   districts.value = regionData.find(province => province.label === targetCity.value)?.children;
  //   // tempDistricts.value = districts[0].children
})
// 输出重庆市的所有区县
// console.log(districts[0].children);
const isSelectAddress = ref(false)

import { useTokenStore } from '@/stores/mytoken'
import { useRouter } from 'vue-router'
const router = useRouter()
// 退出事件
const handleLogout = async () => {
  // 1.确认是否退出
  //  等执行await后面的代码，再执行第二个await后面的代码
  await ElMessageBox.confirm('确认要退出?', '退出询问', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).catch(() => {
    ElMessage.info('退出操作已取消')
    // return 空的promise，其状态判定为既不成功,也不失败,导致没有结果，不往下执行
    return new Promise(() => {})
  })
  // 2.执行退出,若失败(极小概率)则不处理
  ElMessage.success('成功退出!')
  // 3.清空token,(调用封装useTokenStore中的saveToken方法)跳转到 login
  // const store = useTokenStore()
  // store.saveToken('')
  useTokenStore().saveToken('')
  // const router =  useRouter()
  router.push({ name: 'login' })
}
</script>
<template>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>

  <body>
    <!-- 顶部 -->
    <div class="top">
      <div class="w">
        <div class="top_left">
          <img src="@/assets/images/icon_dingwei.png" class="icon" />
          <span>{{ targetCity }}</span>
          <a @click="changeCity()">[更换城市]</a>
        </div>
        <div class="top_right">
          <a @click="handleLogout">退出登录&nbsp&nbsp&nbsp&nbsp</a>
          <router-link active-class="active" to="/perCenter">个人中心</router-link>
        </div>
      </div>
    </div>

    <!-- 头部 -->
    <div class="header">
      <div class="w">
        <div class="logo">
          <!-- <a href="index.html">
            <img src="@/assets/images/logo.png">
          </a> -->
          <ul class="nav">
            <li @click="goHome">首页</li>
            <li @click="goshangjia">全部商家</li>
          </ul>
        </div>
        <div class="search">
          <input type="text" v-model="text" name="" placeholder="搜索商家或美食" />
          <button @click="search(text)">
            <img src="@/assets/images/icon_search.png" class="icon" />
          </button>
        </div>
        <div class="header_right"></div>
      </div>
      <div class="w header3"></div>
    </div>
    <div class="main">
      <div class="w">
        <div class="bread">
          <a @click="goHome">首页</a>
          <span>></span>
          <a @click="goshangjia">全部商家</a>
        </div>
        <div class="cate_search">
          <div class="cate_search_item">
            <span>分类:</span>
            <ul>
              <li @click="change" class="on">全部</li>
              <li @click="change1">烧烤</li>
              <li @click="change2">地方菜系</li>
              <li @click="change3">小吃快餐</li>
              <li @click="change4">火锅</li>
              <li @click="change5">自助餐</li>
              <li @click="change6">面馆</li>
              <li @click="change7">咖啡厅</li>
              <li @click="change8">面包甜点</li>
            </ul>
          </div>
          <!-- <div class="cate_search_item">
            <span>地点:</span>
            <ul>
              <li class="on"><a href="">全部</a></li>
              <div class="item" v-for="(p, index) in tempDistricts">
                <li><a href="">{{ p.label }}</a></li>
              </div>
            </ul>
          </div> -->

          <el-dialog v-model="isSelectAddress" title="选择地址" width="500">
            <el-select
              v-model="targetCity"
              placeholder="选择地址"
              size="large"
              style="width: 240px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            /></el-select>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="isSelectAddress = false">取消</el-button>
                <el-button type="primary" @click="isSelectAddress = false"> 确定 </el-button>
              </div>
            </template>
          </el-dialog>
        </div>

        <div class="sj_list_wrapper">
          <!-- 测试开始 -->
          <div class="item" v-for="(p, index) in shopmenu">
            <div v-if="p.restauranttypename == searchKeyword || searchKeyword == ''">
              <el-card>
                <div class="container">
                  <el-card style="width: 300px; height: 320px; border-radius: 20px">
                    <div class="left">
                      <div class="image-container">
                        <div
                          class="item_img"
                          @click="
                            nextdetail(
                              p.restaurantid,
                              p.addressareaid,
                              p.phone,
                              p.createtime,
                              p.updatetime,
                              p.image,
                              p.restaurantname,
                              p.state,
                              p.addressdetail
                            )
                          "
                        >
                          <div v-if="p.image">
                            <img :src="p.image" />
                          </div>
                          <div v-else>
                            <img
                              src="https://img0.baidu.com/it/u=1081440993,744231435&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-card>

                  <div style="margin: 20px"></div>
                  <div
                    class="right"
                    @click="
                      nextdetail(
                        p.restaurantid,
                        p.addressareaid,
                        p.phone,
                        p.createtime,
                        p.updatetime,
                        p.image,
                        p.restaurantname,
                        p.state,
                        p.addressdetail
                      )
                    "
                  >
                    <div class="descriptions-container">
                      <!-- 这里开始 -->
                      <el-card
                        class="info-card"
                        shadow="always"
                        style="width: 750px; height: 280px"
                      >
                        <!-- 信息卡片的容器 -->
                        <div class="info-line">
                          <!-- 第一行信息 -->

                          <!-- 餐厅名称标签 -->
                          <h1 class="value">{{ p.restaurantname }}</h1>
                          <!-- 餐厅名称 -->

                          &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<el-icon>
                            <GoldMedal /> </el-icon
                          ><span class="label">&nbsp评分:</span>
                          <!-- el-rate 组件 -->
                          <span class="value" style="color: red">
                            <el-rate
                              v-model="p.point"
                              disabled
                              show-score
                              text-color="#fe4330"
                              score-template="{value} 分"
                            />
                          </span>
                        </div>
                        <!-- 第二行信息 -->
                        <div class="info-line">
                          <el-icon> <Iphone /> </el-icon><span class="label">&nbsp联系电话:</span>
                          <!-- 联系电话标签 -->
                          <span class="value">{{ p.phone }}</span>
                          <!-- 联系电话 -->
                          <el-icon> <UserFilled /> </el-icon
                          ><span class="label">&nbsp剩余桌数:</span>
                          <!-- 剩余桌数标签 -->
                          <span class="value">{{ p.surplus }}</span>
                          <!-- 剩余桌数 -->
                        </div>
                        <!-- 第三行信息 -->
                        <div class="info-line">
                          <el-icon> <Clock /> </el-icon><span class="label">&nbsp开始时间:</span>
                          <!-- 开始时间标签 -->
                          <span class="value">{{ p.createtime }}</span>
                          <!-- 开始时间 -->
                          <el-icon> <Clock /> </el-icon><span class="label">&nbsp整改时间:</span>
                          <!-- 整改时间标签 -->
                          <span class="value">{{ p.updatetime }}</span>
                        </div>
                        <div class="custom-container">
                          <!-- 第四行信息 -->
                          <div class="custom-line">
                            <el-icon> <Management /> </el-icon><span><b>&nbsp餐厅介绍:</b></span>
                            <!-- 餐厅介绍标签 -->
                            <span>&nbsp{{ p.introduction }}</span>
                            <!-- 餐厅介绍 -->
                          </div>
                          <!-- 第五行信息 -->
                          <div class="custom-line">
                            <el-icon> <LocationFilled /> </el-icon
                            ><span><b>&nbsp餐厅地址:</b></span>
                            <!-- 餐厅地址标签 -->
                            <span>&nbsp{{ p.addressdetail }}</span>
                          </div>
                          <div class="custom-line">
                            <!-- 餐厅地址 -->
                            <el-icon> <WarningFilled /> </el-icon><span><b>&nbsp状态:</b></span>
                            <!-- 状态标签 -->
                            <span v-if="p.state == 2"
                              >&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                              <el-tag type="danger" effect="dark">休息</el-tag></span
                            >
                            <span v-else-if="p.state == 1"
                              >&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                              <el-tag type="success" effect="dark">营业</el-tag></span
                            >
                            <span v-else="p.state == 0"
                              >&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<el-tag type="warning"
                                >整改</el-tag
                              ></span
                            >
                          </div>
                        </div>
                      </el-card>
                      <!-- 这里结束 -->
                    </div>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
          <!-- 测试结束 -->
          <el-affix :offset="120">
            <el-tabs tab-position="left" class="demo-tabs">
              <el-tab-pane label="User">
                <div class="item" v-for="(p, index) in shopmenu">
                  <div v-if="p.restauranttypename == searchKeyword || searchKeyword == ''">
                    <el-card>
                      <div class="container">
                        <el-card style="width: 300px; height: 320px; border-radius: 20px">
                          <div class="left">
                            <div class="image-container">
                              <div
                                class="item_img"
                                @click="
                                  nextdetail(
                                    p.restaurantid,
                                    p.addressareaid,
                                    p.phone,
                                    p.createtime,
                                    p.updatetime,
                                    p.image,
                                    p.restaurantname,
                                    p.state,
                                    p.addressdetail
                                  )
                                "
                              >
                                <div v-if="p.image">
                                  <img :src="p.image" />
                                </div>
                                <div v-else>
                                  <img
                                    src="https://img0.baidu.com/it/u=1081440993,744231435&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333"
                                  />
                                </div>
                              </div>
                            </div>
                          </div>
                        </el-card>

                        <div style="margin: 20px"></div>
                        <div
                          class="right"
                          @click="
                            nextdetail(
                              p.restaurantid,
                              p.addressareaid,
                              p.phone,
                              p.createtime,
                              p.updatetime,
                              p.image,
                              p.restaurantname,
                              p.state,
                              p.addressdetail
                            )
                          "
                        >
                          <div class="descriptions-container">
                            <!-- 这里开始 -->
                            <el-card
                              class="info-card"
                              shadow="always"
                              style="width: 750px; height: 280px"
                            >
                              <!-- 信息卡片的容器 -->
                              <div class="info-line">
                                <!-- 第一行信息 -->

                                <!-- 餐厅名称标签 -->
                                <h1 class="value">{{ p.restaurantname }}</h1>
                                <!-- 餐厅名称 -->

                                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<el-icon>
                                  <GoldMedal /> </el-icon
                                ><span class="label">&nbsp评分:</span>
                                <!-- el-rate 组件 -->
                                <span class="value" style="color: red">
                                  <el-rate
                                    v-model="p.point"
                                    disabled
                                    show-score
                                    text-color="#fe4330"
                                    score-template="{value} 分"
                                  />
                                </span>
                              </div>
                              <!-- 第二行信息 -->
                              <div class="info-line">
                                <el-icon> <Iphone /> </el-icon
                                ><span class="label">&nbsp联系电话:</span>
                                <!-- 联系电话标签 -->
                                <span class="value">{{ p.phone }}</span>
                                <!-- 联系电话 -->
                                <el-icon> <UserFilled /> </el-icon
                                ><span class="label">&nbsp剩余桌数:</span>
                                <!-- 剩余桌数标签 -->
                                <span class="value">{{ p.surplus }}</span>
                                <!-- 剩余桌数 -->
                              </div>
                              <!-- 第三行信息 -->
                              <div class="info-line">
                                <el-icon> <Clock /> </el-icon
                                ><span class="label">&nbsp开始时间:</span>
                                <!-- 开始时间标签 -->
                                <span class="value">{{ p.createtime }}</span>
                                <!-- 开始时间 -->
                                <el-icon> <Clock /> </el-icon
                                ><span class="label">&nbsp整改时间:</span>
                                <!-- 整改时间标签 -->
                                <span class="value">{{ p.updatetime }}</span>
                              </div>
                              <div class="custom-container">
                                <!-- 第四行信息 -->
                                <div class="custom-line">
                                  <el-icon> <Management /> </el-icon
                                  ><span><b>&nbsp餐厅介绍:</b></span>
                                  <!-- 餐厅介绍标签 -->
                                  <span>&nbsp{{ p.introduction }}</span>
                                  <!-- 餐厅介绍 -->
                                </div>
                                <!-- 第五行信息 -->
                                <div class="custom-line">
                                  <el-icon> <LocationFilled /> </el-icon
                                  ><span><b>&nbsp餐厅地址:</b></span>
                                  <!-- 餐厅地址标签 -->
                                  <span>&nbsp{{ p.addressdetail }}</span>
                                </div>
                                <div class="custom-line">
                                  <!-- 餐厅地址 -->
                                  <el-icon> <WarningFilled /> </el-icon
                                  ><span><b>&nbsp状态:</b></span>
                                  <!-- 状态标签 -->
                                  <span v-if="p.state == 2"
                                    >&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                    <el-tag type="danger" effect="dark">休息</el-tag></span
                                  >
                                  <span v-else-if="p.state == 1"
                                    >&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                    <el-tag type="success" effect="dark">营业</el-tag></span
                                  >
                                  <span v-else="p.state == 0"
                                    >&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<el-tag type="warning"
                                      >整改</el-tag
                                    ></span
                                  >
                                </div>
                              </div>
                            </el-card>
                            <!-- 这里结束 -->
                          </div>
                        </div>
                      </div>
                    </el-card>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="Config">Config</el-tab-pane>
              <el-tab-pane label="Role">Role</el-tab-pane>
              <el-tab-pane label="Task">Task</el-tab-pane>
            </el-tabs>
          </el-affix>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="w">
        <div class="footer_list">
          <a href="">关于我们</a>
          <span>|</span>
          <a href="">商户诚信公约</a>
          <span>|</span>
          <a href="">规则中心</a>
          <span>|</span>
          <a href="">媒体报道</a>
          <span>|</span>
          <a href="">商户入驻</a>
          <span>|</span>
          <a href="">推广服务</a>
          <span>|</span>
          <a href="">人才招聘</a>
          <span>|</span>
          <a href="">最新咨询</a>
          <span>|</span>
          <a href="">联系我们</a>
          <span>|</span>
          <a href="">应用下载</a>
        </div>
        <div class="footer_copyright">©2003-2022 外卖人, All Rights Reserved</div>
      </div>
    </div>
  </body>
</template>

<style>
* {
  padding: 0;
  margin: 0;
}

body {
  background-color: #f8f8f8;
}

.wh_body {
  background-color: #fff;
}

.w {
  width: 1200px;
  margin: 0 auto;
}

ul {
  list-style: none;
}

img {
  vertical-align: top;
}

a {
  text-decoration: none;
}

/*顶部*/
.top {
  background: #f8f8f8;
  font-size: 14px;
}

.top .w {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top_left {
  display: flex;
  align-items: center;
}

.top_left .icon {
  width: 15px;
  height: 15px;
  margin-right: 4px;
}

.top_left span {
  margin-right: 3px;
}

.top_left a {
  color: #666;
}

.top_left a:hover {
  color: #f65d29;
}

.top_right a {
  color: #666;
}

.top_right a:hover {
  color: #f65d29;
}

/*头部*/
.header {
  background-color: #fff;
  box-shadow: 0 12px 12px 0 rgb(108, 108, 108, 0.1);
  border-bottom: 1px solid #f3f3f3;
}

.header .w {
  padding: 15px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header .logo {
  width: 275px;
}

.header .logo img {
  width: 200px;
}

.header .header_right {
  width: 275px;
}

.header .search {
  display: flex;
  align-items: center;
}

.header .search input {
  height: 40px;
  border: 1px solid #e5e5e5;
  border-right: none;
  box-sizing: border-box;
  padding-left: 10px;
  width: 360px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.header .search button {
  height: 40px;
  width: 80px;
  background-color: #f65d29;
  border: none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.header .search button .icon {
  height: 30px;
}

.header2 {
  padding-top: 0 !important;
  height: 35px;
}

.header2 .cate_all {
  font-size: 15px;
  font-weight: bold;
  width: 210px;
  box-sizing: border-box;
  padding-left: 15px;
  background: #ff6b37;
  height: 35px;
  line-height: 35px;
  color: #fff;
}

.header .nav {
  margin-right: auto;
  margin-left: 40px;
  display: flex;
  align-items: center;
}

.header .nav li {
  margin-right: 50px;
}

.header .nav li a {
  font-size: 15px;
  color: #000;
  font-weight: bold;
}

.header .nav li a:hover,
.header .nav li.on a {
  color: #f65d29;
}

.header3 {
  padding-top: 0 !important;
  height: 35px;
}

.header3 .nav {
  margin-left: 0;
  /*margin-left: 40px;*/
}

/*广告*/
.banenr {
}

.banenr .w {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.banenr .cats {
  background: #383131;
  width: 210px;
  height: 500px;
  box-sizing: border-box;
  padding: 10px 0;
  margin-bottom: auto;
}

.banenr .cats li {
  padding-left: 15px;
  height: 32px;
  line-height: 32px;
  margin-bottom: 8px;
}

.banenr .cats a {
  color: #fff;
  font-size: 15px;
  letter-spacing: 1px;
}

.banenr .cats li .sm_link {
  margin-left: 3px;
  font-size: 12px;
  color: #ccc;
}

.banenr .cats a:hover {
  color: #f65d29;
}

.banenr .banner_img {
  width: 980px;
  padding-top: 18px;
}

.banenr .banner_img img {
  width: 100%;
  height: 482px;
}

/*推荐商家*/
.sj {
  margin-top: 40px;
}

.ilist_wrapper {
  border-radius: 5px;
}

.ilist_wrapper .tit {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  height: 44px;
  line-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f65d29;
  color: #fff;
  padding: 0 10px;
  font-size: 14px;
}

.ilist_wrapper .tit a {
  color: #fff;
  font-size: 13px;
}

.ilist_wrapper .list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 20px 0;
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
  border-top: none;
  flex-wrap: wrap;
  background-color: #fff;
}

.ilist_wrapper .list .item {
  width: 220px;
  margin-bottom: 30px;
}

.ilist_wrapper .list .item .item_img img {
  width: 100%;
  height: 150px;
}

.ilist_wrapper .list .item .item_name {
  color: #363636;
  font-weight: bold;
  margin-bottom: 5%;
}

.ilist_wrapper .list .item:hover .item_name {
  color: #f65d29;
}

.ilist_wrapper .list .item .item_tuijian {
  color: #080808;
  font-size: 14px;
  margin-bottom: 5%;
}

.ilist_wrapper .list .item .item_tuijian1 {
  color: #f00808;
  font-size: 14px;
  margin-bottom: 5%;
}

.ilist_wrapper .list .item .item_tuijian5 {
  font-size: 14px;
  margin-top: 10%;
  margin-left: 5%;
}

.ilist_wrapper .list .item .item_tuijian2 {
  color: #0b0a0a;
  font-size: 14px;
  margin-bottom: 5%;
}

.ilist_wrapper .list .item .item_tuijian span {
  font-size: 13px;
  margin-left: 3px;
}

.ilist_wrapper .list .item .item_price {
  color: #363636;
  font-size: 13px;
  color: #999;
  margin: 2px 0 0;
}

.ilist_wrapper .list .item .item_price span {
  color: #f65d29;
  font-size: 16px;
}

/*底部*/
.footer {
  margin-top: 40px;
  background-color: #f0f0f0;
  padding: 30px 0;
}

.footer_list {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8c8c8c;
}

.footer_list a {
  color: #8c8c8c;
  font-size: 14px;
}

.footer_list span {
  margin: 0 20px;
  font-size: 14px;
}

.footer_copyright {
  text-align: center;
  font-size: 13px;
  color: #8c8c8c;
  margin-top: 10px;
}

/*全部商家*/
.cate_search {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  width: 100%;
  box-sizing: border-box;
  padding: 30px 15px 10px;
}

.cate_search_item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 12px;
  margin-bottom: 10px;
}

.cate_search_item span {
  display: inline-block;
  width: 68px;
  margin-bottom: auto;
  color: #999;
  height: 24px;
  line-height: 24px;
}

.cate_search_item ul {
  width: 1130px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.cate_search_item ul li {
  display: inline-block;
  width: 80px;
  height: 24px;
  margin-bottom: 10px;
  line-height: 24px;
  text-align: center;
  margin-right: 10px;
}

.cate_search_item ul a {
  font-size: 12px;
  color: #666;
  display: inline-block;
  height: 24px;
}

.cate_search_item ul li.on {
  background-color: #f65d29;
  border-radius: 12px;
}

.cate_search_item ul li.on a {
  color: #fff;
}

.cate_search_item ul li:hover {
  background-color: #f65d29;
  border-radius: 12px;
}

.cate_search_item ul li:hover a {
  color: #fff;
}

.sj_list_wrapper {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  margin-top: 20px;
}

.sj_list_wrapper .ilist_wrapper .list {
  background-color: transparent;
  border: none;
}

.sj_list .item {
  width: 320px !important;
}

.sj_list .item .item_img img {
  height: 220px !important;
}

.pages {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  margin-top: 10px;
}

.cd {
  margin-left: 20%;
}

.pages a {
  display: inline-block;
  margin: 0 15px;
  font-size: 13px;
  color: #333;
  min-width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
}

.pages a.on {
  background-color: #f65d29;
  color: #fff;
  border-radius: 32px;
}

.pages a:hover {
  background-color: #f65d29;
  color: #fff;
  border-radius: 32px;
}

.pages a.next {
  padding: 0 10px;
}

/*导航*/
.bread {
  display: flex;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 12px;
}

.bread a {
  font-size: 12px;
  color: #666;
}

.bread span {
  color: #666;
  margin: 0 8px;
}

/*商家详情*/
.sj_detail {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 25px 20px;
  border: 1px solid #e5e5e5;
  justify-content: space-between;
  box-shadow: 0 5px 14px 0 rgb(0, 0, 0, 0.1);
}

.sj_detail_left {
  width: 720px;
  box-sizing: border-box;
  padding-right: 20px;
  margin-bottom: auto;
}

.sj_detail_imgs {
  width: 320px;
  margin-bottom: auto;
  text-align: center;
  position: relative;
}

.sj_detail_imgs img {
  width: 100%;
}

.hi {
  margin-top: -10%;
  margin-left: 10%;
}

.sj_detail_imgs .text {
  padding: 5px 0;
  background-color: rgba(0, 0, 0, 0.8);
  color: #e5e5e5;
  font-size: 13px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.sj_detail_name {
  font-size: 24px;
  font-weight: bold;
  padding-bottom: 3px;
  color: #333;
}

.sj_detail_pj {
  display: flex;
  font-size: 13px;
  color: #666;
  margin: 3px 0;
}

.sj_detail_pj span {
  margin-right: 10px;
}

.sj_detail_dz,
.sj_detail_dh,
.sj_detail_sj {
  color: #666;
  margin-bottom: 10px;
  font-size: 14px;
}

.sj_detail_line {
  border-top: 1px solid #e5e5e5;
  margin: 15px 0 15px;
}

.sj_cais_tit {
  margin-top: 35px;
  padding-bottom: 10px;
}

.sj_cais {
  padding: 15px 20px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
}

.sj_cais .cate_search_item {
  padding: 5px 0;
  border-bottom: 1px dashed #e5e5e5;
}

.sj_cai_list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sj_cai {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
  width: 50%;
  box-sizing: border-box;
  border-right: 1px dashed #e5e5e5;
  border-bottom: 1px dashed #e5e5e5;
}

.sj_cai:nth-of-type(2n) {
  border-right: none;
}

.sj_cai_left {
  display: flex;
  align-items: center;
}

.sj_cai_img {
  width: 120px;
  height: 100px;
  margin-right: 20px;
}

.sj_cai_img img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.sj_cai_name {
  font-size: 16px;
  margin-bottom: 10px;
}

.sj_cai_price_box {
  display: flex;
  align-items: center;
}

.sj_cai_price {
  color: #f65d29;
  font-size: 14px;
}

.sj_cai_price span {
  font-size: 28px;
}

.sj_cai_y_price {
  margin-left: 10px;
  margin-top: 10px;
  color: #999;
  font-size: 13px;
  text-decoration: line-through;
}

.sj_cai_buy button {
  background-color: #f65d29;
  color: #fff;
  height: 34px;
  width: 100px;
  text-align: center;
  line-height: 34px;
  border-radius: 20px;
  border: none;
}

.sj_cai_page {
  margin-top: 40px;
}

/*商家图片*/
.sj_imgs {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sj_imgs_left {
  width: 120px;
  margin-bottom: auto;
}

.sj_imgs_cat {
  margin-bottom: 15px;
  border: 1px solid #e5e5e5;
}

.sj_imgs_cat a {
  width: 100%;
  display: inline-block;
  font-size: 12px;
  padding: 5px 8px;
  background-color: #f8f8f8;
  box-sizing: border-box;
  color: #fff;
  color: #333;
  border-bottom: 1px solid #e5e5e5;
}

.sj_imgs_cat a:last-of-type {
  border-bottom: none;
}

a.sj_imgs_cat_all {
  display: flex !important;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  background-color: #f65d29;
  color: #fff;
  font-weight: bold;
}

a.sj_imgs_cat_1 {
  display: flex !important;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  background-color: #bbbbbb;
  color: #fff;
  font-weight: bold;
}

.sj_imgs_list {
  width: 1060px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.sj_img {
  box-sizing: border-box;
  width: 250px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  margin-bottom: 18px;
}

.sj_img img {
  width: 100%;
  height: 100%;
}

.sj_img:hover {
  border: 1px solid #f65d29;
}

/*入驻*/
.main_ruzhu {
  background-color: #fff;
}

.ruzhu_1 {
  text-align: center;
}

.ruzhu_tit {
  width: 120px;
  display: inline-block;
  margin: 35px auto 30px;
  text-align: center;
  font-size: 20px;
  padding: 5px 10px;
  font-weight: bold;
  background-color: #f65d29;
  color: #fff;
}

.ruzhu_img {
  width: 100%;
  padding: 0 60px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.ruzhu_img img {
  width: 100%;
}

.ruzhu_lc_box {
  padding: 40px 0 60px;
  background-color: #f8f8f8;
  text-align: center;
  margin-top: 50px;
}

.ruzhu_lc {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ruzhu_lc1 {
  width: 300px;
}

.ruzhu_lc_num {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 60px;
  background-color: #f65d29;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.ruzhu_lc1 h4 {
  color: #333;
  font-size: 22px;
  margin-top: 20px;
}

.ruzhu_lc1 .text {
  font-size: 14px;
  color: #333;
  margin-top: 6px;
  text-align: center;
}

.ruzhu_yq_box {
  background-color: #fff;
}

.ruzhu_lc_num img {
  width: 60px;
}

.ruzhu_btn button {
  background: #f65d29;
  border-radius: 2px;
  margin-top: 30px;
  width: 148px;
  line-height: 48px;
  text-align: center;
  font-size: 22px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  border: none;
}

/*关于我们*/
.aboutus_main .w {
  background-color: #fff;
}

.aboutus_img {
  margin-top: 30px;
}

.aboutus_img img {
  width: 100%;
}

.aboutus_content {
  box-sizing: border-box;
  padding: 0 80px 60px;
}

.aboutus_content h2 {
  color: #333;
  margin-bottom: 40px;
  margin-top: 70px;
}

.aboutus_content p {
  color: #787878;
  line-height: 1.5;
  font-size: 14px;
  margin-bottom: 25px;
}

/*用户反馈*/
.fankui_main {
  margin-top: 30px;
}

.fankui_main .w {
  text-align: center;
  background-color: #fff;
  box-sizing: border-box;
  padding: 60px 60px;
}

.fankui_box h2 {
  font-size: 28px;
  padding-bottom: 8px;
}

.fankui_box .fankui_text {
  color: #787878;
  font-size: 14px;
  margin-bottom: 5px;
}

.fankui_form {
  width: 580px;
  margin: 0 auto;
  padding: 20px 0;
}

.fk_tit {
  margin-bottom: 8px;
  text-align: left;
  width: 100%;
  color: #666;
}

.fk_input {
  margin-bottom: 18px;
}

.fk_input input {
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  box-sizing: border-box;
  border: 1px solid #aaa;
}

.fk_input textarea {
  width: 100%;
  height: 128px;
  line-height: 32px;
  padding-left: 10px;
  box-sizing: border-box;
  border: 1px solid #aaa;
}

.fk_sub button {
  border: none;
  background-color: #f65d29;
  color: #fff;
  height: 40px;
  width: 100%;
  cursor: pointer;
  line-height: 40px;
}

/*我要登录*/
.login_main {
  margin-top: 30px;
}

.login_main .w {
  text-align: center;
  background-color: #fff;
  box-sizing: border-box;
  padding: 60px 60px;
}

.login_box {
}

.login_main h2 {
  font-size: 28px;
  padding-bottom: 8px;
  margin: 20px 0;
}

.login_wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 25px 0;
}

.login_img {
  width: 480px;
}

.login_img img {
  width: 100%;
}

.login_form {
  width: 320px;
  margin-left: 80px;
}

.login_text {
  font-size: 14px;
  color: #787878;
  text-align: left;
  padding: 5px 0;
}

.login_item {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid #aaa;
  margin-bottom: 20px;
}

.login_item_left {
  font-size: 14px;
  color: #787878;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login_item_left img {
  width: 20px;
}

.login_item input {
  width: 190px;
  border: none;
  height: 38px;
  margin-left: 10px;
}

.login_item input:focus {
  outline: none;
}

.login_yzm {
  font-size: 14px;
  color: #787878;
  width: 85px;
}

.login_sub_item {
  border: none;
  margin-bottom: 10px;
}

.login_sub_item button {
  height: 38px;
  line-height: 38px;
  text-align: center;
  border: none;
  width: 100%;
  color: #fff;
  cursor: pointer;
  background-color: #f65d29;
}

.login_text_center {
  text-align: center;
}

.login_agree {
  font-size: 14px;
  color: #787878;
  display: flex;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

.login_agree input {
  margin-right: 10px;
}

.login_agree a {
  color: #f65d29;
}
</style>

<style scoped>
.descriptions-container {
  flex: 1;
  /* 描述列表占据剩余空间 */
  margin-right: 20px;
  /* 描述列表和图片之间的间距 */
}

.image-container img {
  width: 260px;
  /* 图片宽度自动调整 */
  height: 270px;
  /* 图片高度自动调整 */
  /* 图片最大宽度 */
  max-height: 270px;
  /* 图片最大高度 */
  border-radius: 2px;
  /* 图片圆角 */
}

.container {
  display: flex;
  align-items: center;
}

.left {
  flex-shrink: 0;
  /* 防止图片被压缩 */
}

.right {
  margin-left: -13px;
  /* 可以根据具体情况设置间距 */
}
</style>
<!-- span标签开始 -->
<style scoped>
/* CSS样式开始 */
.info-card {
  /* 信息卡片样式 */
  border-radius: 20px;
  /* 边框圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
  padding: 20px;
  /* 内边距 */
  background-color: #f9f9f9;
  /* 背景颜色 */
}

.info-line {
  /* 信息行样式 */
  display: flex;
  /* 项目水平居中对齐 */
  align-items: center;
  /* 使用 Flex 布局 */
  margin-bottom: 18px;
  /* 底部外边距 */
  margin-top: 2px;
}

.label {
  /* 标签样式 */
  flex: 1;
  /* 占据 Flex 容器的比例 */
  font-weight: bold;
  /* 字体加粗 */
  color: #333;
  margin-top: 0px;
  /* 字体颜色 */
}

.value {
  /* 值样式 */
  flex: 3;
  /* 占据 Flex 容器的比例 */
  color: #666;
  /* 字体颜色 */
  text-align: left;
}

.value:hover {
  color: #f65d29;
  /* 鼠标悬停时，文字颜色变为红色 */
  cursor: pointer;
  /* 鼠标悬停时，鼠标指针变为点击状态 */
}

/* CSS样式结束 */
</style>
<!-- span标签结束 -->

<style scoped>
.custom-container {
  display: flex;
  flex-direction: column;
}

.custom-line {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px;
  /* 底部外边距 */
  margin-top: 5px;
}

.custom-line span {
  margin-right: 10px;
}
</style>
